<template>
  <div class="condition">
    <div class="tit">
      <h2>合作条件</h2>
      <div class="blue-box"></div>
      <p>一诺万金面向全国招商合作，期待与志同道合的伙伴共谋发展，共创伟业</p>
    </div>
    <div class="con">
      <div
        class="con-item"
        v-for="item in condition"
        :key="item.img"
      >
        <!-- 图片 -->
        <img :src="item.img" alt="">
        <!-- 文字 -->
        <h2>{{ item.text.mainTit }}</h2>
        <p>{{ item.text.subHead }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Condition",
    data() {
      return {
        condition: [
          {
            img: require("assets/img/team/tj1.png"),
            text: {
              mainTit: "认可文化",
              subHead: "认可一诺万金的企业文化，诚实守信，合法合规经营，具有良好的企业信誉"
            }
          },
          {
            img: require("assets/img/team/tj2.png"),
            text: {
              mainTit: "客户资源",
              subHead: "具有与一诺万金系列产品匹配的客户资源，愿意与一诺万金公司共谋发展"
            }
          },
          {
            img: require("assets/img/team/tj3.png"),
            text: {
              mainTit: "资金实力",
              subHead: "企业具有一定的资金实力，良好的付款信誉，不拖欠上下游合作伙伴的相关费用"
            }
          }
        ]
      }
    }
  }
</script>

<style>
  .condition {
    width: 62.5%;
    margin: 40px auto;
    text-align: center;
  }

  .condition .tit {
    margin-bottom: 24px;
  }

  .condition .tit h2 {
    font-size: 36px;
    font-weight: 1000;
    color: #333;
  }

  .condition .tit .blue-box {
    width: 64px;
    height: 8px;
    background: linear-gradient(90deg, #2f6bee, #009fff);
    border-radius: 8px;
    margin: 8px auto;
  }

  .condition .tit p {
    font-size: 16px;
    color: #666;
  }

  .condition .con {
    background-color: #fff;
    box-shadow: 0 0 10px #f5f5f5;
    display: flex;
    padding: 64px 0;
  }

  .condition .con:hover {
    transition-duration: 0.3s;
    transform: translateY(-5px);
  }

  .condition .con .con-item {
    flex: 1;
    margin: 0 80px;
  }

  .condition .con .con-item img {
    margin-bottom: 40px;
  }

  .condition .con .con-item h2 {
    font-size: 20px;
    font-weight: 1000;
    color: #333;
    margin-bottom: 16px;
  }

  .condition .con .con-item p {
    font-size: 16px;
    color: #666;
    text-align: justify;
  }
</style>